<template>
	<view class="w-full">
		<view class="text-[#34A4E2] text-[31rpx] mb-[18rpx]"
			>问题{{ current }}<text class="text-[24rpx]">/{{ list.length }}</text></view
		>
		<view class="w-full relative h-[8rpx] rounded-[4rpx]" style="background: #f1f1f1">
			<view
				class="h-[14rpx] absolute -top-[3rpx] left-0 left-0 z-1 rounded-[7rpx]"
				:style="{ background: '#34A4E2', width: (current / list.length) * 100 + '%' }"
			></view>
		</view>
		<view
			class="w-full"
			v-for="(item, index) in list"
			:key="item.master_code_crc32"
			v-show="index + 1 === current"
		>
			<rich-text
				class="text-[#303030] text-[36rpx] w-full mt-[50rpx] inline-block"
				:nodes="item.context"
			></rich-text>
			<view class="w-full mt-[80rpx]">
				<view
					class="w-full h-[111rpx] mb-[29rpx] last:mb-0 px-[57rpx] box-border flex items-center rounded-[56rpx] text-[#303030] text-[32rpx]"
					v-for="(cited, windex) in item.option"
					:key="cited"
					:style="[
						type === 'answer' && {
							background: item.answer.indexOf(fileEn[windex]) !== -1 ? '#34A4E2' : '#F1F1F1',
							color: item.answer.indexOf(fileEn[windex]) !== -1 ? '#ffffff' : '#303030',
						},
						type === 'check' && {
							background:
								item.right_answer.indexOf(fileEn[windex]) !== -1
									? '#3EC34B'
									: item.answer.indexOf(fileEn[windex]) !== -1
										? '#F8745D'
										: '#F1F1F1',
							color:
								item.right_answer.indexOf(fileEn[windex]) !== -1
									? '#fff'
									: item.answer.indexOf(fileEn[windex]) !== -1
										? '#fff'
										: '#303030',
						},
					]"
					@tap="choseItem(index, windex)"
					>{{ fileEn[windex] }}<text class="ml-[18rpx]">{{ cited }}</text></view
				>
			</view>

			<view
				class="w-full rounded-[33rpx] px-[29rpx] py-[29rpx] box-border mt-[38rpx]"
				style="background: #f6f7f9"
				v-if="type === 'check' && item.detailed_answer"
			>
				<view class="text-[#303030] text-[29rpx]">答题卡</view>
				<rich-text
					class="w-full text-[29rpx] text-[#303030] inline-block mt-3"
					:nodes="item.detailed_answer"
				></rich-text>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
const emit = defineEmits(['getAnswer']);
const fileEn = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L'];
const props = withDefaults(
	defineProps<{
		current?: number;
		list: any;
		type?: string;
	}>(),
	{
		current: 1, // 当前处在第几题
		list: null, // 试题数据 包括解析数据
		type: 'answer', // 试卷类型, answer答题, check查看解析
	},
);

const choseItem = (index, windex) => {
	if (props.type === 'check') return;
	const alList = props.list;
	if (alList[index].qtp_code === 'QTP_OBJ_003') {
		// 单选
		alList[index].answer = fileEn[windex];
	}
	if (alList[index].qtp_code === 'QTP_OBJ_004') {
		// 多选
		const str = alList[index].answer;
		if (str.indexof(fileEn[windex]) !== -1) {
			alList[index].answer = str.replace(fileEn[windex], '');
		} else {
			alList[index].answer = str + fileEn[windex];
		}
	}

	emit('getAnswer', alList);
};
</script>

<style lang="scss" scoped></style>
